<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="10" :sm="10">
            <a-form-item label="设备">
              <a-select
                v-has="'sensor:All_Sensor_Attribute'"
                style="width:200px;"
                placeholder="请选择设备"
                @change="handleEquipmentChange"
              >
                <a-select-opt-group label="空气质量监测系统">
                  <a-select-option key="Air_Sensor_Attribute-WHU_Sensor_G_0001" value="Air_Sensor_Attribute-WHU_Sensor_G_0001">空气质量监测系统_0001</a-select-option>
                  <a-select-option key="Air_Sensor_Attribute-WHU_sensor_G_002" value="Air_Sensor_Attribute-WHU_sensor_G_002">空气质量监测系统_002</a-select-option>
                </a-select-opt-group>
                <a-select-opt-group label="水质监测预警系统">
                  <a-select-option key="Water_Sensor_Attribute-WHU_sensor_W_0001" value="Water_Sensor_Attribute-WHU_sensor_W_0001">水质监测预警系统_0001</a-select-option>
                  <a-select-option key="Water_Sensor_Attribute-WHU_sensor_W_002" value="Water_Sensor_Attribute-WHU_sensor_W_002">水质监测预警系统_002</a-select-option>
                </a-select-opt-group>
                <a-select-opt-group label="土壤墒情检测系统">
                  <a-select-option key="Soil_Sensor_Attribute-WHU_Sensor_G_0001" value="Soil_Sensor_Attribute-WHU_Sensor_G_0001">土壤墒情检测系统_0001</a-select-option>
                  <a-select-option key="Soil_Sensor_Attribute-WHU_sensor_G_002" value="Soil_Sensor_Attribute-WHU_sensor_G_002">土壤墒情检测系统_002</a-select-option>
                </a-select-opt-group>
                <a-select-opt-group label="气象环境监测系统">
                  <a-select-option key="Gas_Sensor_Attribute-WHU_Sensor_G_0001" value="Gas_Sensor_Attribute-WHU_Sensor_G_0001">气象环境监测系统_0001</a-select-option>
                  <a-select-option key="Gas_Sensor_Attribute-WHU_sensor_G_002" value="Gas_Sensor_Attribute-WHU_sensor_G_002">气象环境监测系统_002</a-select-option>
                </a-select-opt-group>
              </a-select>
              <a-select
                v-has="'sensor:Air_Sensor_Attribute'"
                style="width:200px;"
                placeholder="请选择设备"
                @change="handleEquipmentChange"
              >
                <a-select-opt-group label="空气质量监测系统">
                  <a-select-option key="Air_Sensor_Attribute-WHU_Sensor_G_0001" value="Air_Sensor_Attribute-WHU_Sensor_G_0001">空气质量监测系统_0001</a-select-option>
                  <a-select-option key="Air_Sensor_Attribute-WHU_sensor_G_002" value="Air_Sensor_Attribute-WHU_sensor_G_002">空气质量监测系统_002</a-select-option>
                </a-select-opt-group>
              </a-select>
              <a-select
                v-has="'sensor:Water_Sensor_Attribute'"
                style="width:200px;"
                placeholder="请选择设备"
                @change="handleEquipmentChange"
              >
                <a-select-opt-group label="水质监测预警系统">
                  <a-select-option key="Water_Sensor_Attribute-WHU_sensor_W_0001" value="Water_Sensor_Attribute-WHU_sensor_W_0001">水质监测预警系统_0001</a-select-option>
                  <a-select-option key="Water_Sensor_Attribute-WHU_sensor_W_002" value="Water_Sensor_Attribute-WHU_sensor_W_002">水质监测预警系统_002</a-select-option>
                </a-select-opt-group>
              </a-select>
              <a-select
                v-has="'sensor:Soil_Sensor_Attribute'"
                style="width:200px;"
                placeholder="请选择设备"
                @change="handleEquipmentChange"
              >
                <a-select-opt-group label="土壤墒情检测系统">
                  <a-select-option key="Soil_Sensor_Attribute-WHU_Sensor_G_0001" value="Soil_Sensor_Attribute-WHU_Sensor_G_0001">土壤墒情检测系统_0001</a-select-option>
                  <a-select-option key="Soil_Sensor_Attribute-WHU_sensor_G_002" value="Soil_Sensor_Attribute-WHU_sensor_G_002">土壤墒情检测系统_002</a-select-option>
                </a-select-opt-group>
              </a-select>
              <a-select
                v-has="'sensor:Gas_Sensor_Attribute'"
                style="width:200px;"
                placeholder="请选择设备"
                @change="handleEquipmentChange"
              >
                <a-select-opt-group label="气象环境监测系统">
                  <a-select-option key="Gas_Sensor_Attribute-WHU_Sensor_G_0001" value="Gas_Sensor_Attribute-WHU_Sensor_G_0001">气象环境监测系统_0001</a-select-option>
                  <a-select-option key="Gas_Sensor_Attribute-WHU_sensor_G_002" value="Gas_Sensor_Attribute-WHU_sensor_G_002">气象环境监测系统_002</a-select-option>
                </a-select-opt-group>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="10" :sm="10">
            <a-form-item label="时间">
            <a-range-picker
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              @change="onChange"
            />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="4">
            <a-button :loading="dataLoading" :disabled="btnDsiabled"  type="primary" @click="searchQuery">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!--table区 -->
    <div>
      <!--已选择的清空
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      -->
      <a-table
        ref="table"
        size="middle"
        bordered
        :scroll="{ x: 1300 }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
      </a-table>
    </div>
  </a-card>
</template>

<script>
  import {getAction} from '@/api/manage';
  import moment from 'moment';
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'

  export default {
    name: 'SensorDataList',
    mixins: [JeecgListMixin],
    data() {
      return {
        //表头
        columns: [
          {
            "dataIndex": "device_name",
            "title": "设备名称",
            "align": "center"
          },
          {
            "dataIndex": "event_time",
            "title": "时间",
            "align": "center"
          }
        ],
        url:{
          queryDataByParam:"/sensorapi/queryDataByParam",
          getTableHeadTitle:"/sensorapi/getTableHeadTitle",
        },
        equipmentName:"",
        startTime:"",
        endTime:"",
        pageNo:"1",
        pageSize:"10",
        dataLoading:false,
        btnDsiabled:false
      }
    },
    created(){
      this.loadData();
    },
    methods: {
      handleEquipmentChange(value) {
        this.equipmentName = value;
        getAction(this.url.getTableHeadTitle, {deviceName:value}).then((res) => {
          if (res.success) {
            this.columns = res.result;
            this.dataSource = [];
          }
        });
      },
      onChange(dates, dateStrings) {
        this.startTime = dateStrings[0];
        this.endTime = dateStrings[1];
      },
      loadData() {
        if(this.startTime == "" || this.endTime == "" || this.equipmentName == "") {
          return;
        }
      },
      searchQuery() {
        if(this.startTime == "" || this.endTime == "") {
          this.$notification['error']({
            message: '系统提示',
            description: '请选择开始时间或结束时间！',
          });
          return;
        }
        if(this.equipmentName == "") {
          this.$notification['error']({
            message: '系统提示',
            description: '请选择设备！',
          });
          return;
        }
        this.dataLoading = true;
        this.btnDsiabled = true;
        this.pageNo = 1;
        this.pageSize = 10;
        this.queryData();
      },
      handleTableChange(pagination, filters, sorter) {
        this.dataLoading = true;
        this.btnDsiabled = true;
        this.ipagination = pagination;
        this.pageNo = pagination.current;
        this.pageSize = pagination.pageSize;
        this.queryData();
      },
      queryData() {
        let paramMap = {
          deviceName:this.equipmentName,
          startTime:this.startTime,
          endTime:this.endTime,
          pageNo:this.pageNo,
          pageSize:this.pageSize
        };
        getAction(this.url.queryDataByParam, paramMap).then((res) => {
          if (res.success && res.result != null) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
          }
          this.dataLoading = false;
          this.btnDsiabled = false;
        });
      }
    }
  }
</script>

<style scoped>

</style>